<!--  -->
<template>
  <div class="">
    <div class="search-header">
      <van-icon class="header-icon" name="arrow-left" @click="$router.go(-2)" />
      <van-search
        disabled
        class="header-Search"
        v-model="value"
        show-action
        :placeholder="gjc"
        @click="retreat"
      >
        <template #action>
          <div>
            <van-icon name="shopping-cart" size="20" />
          </div>
        </template>
      </van-search>
    </div>
    <div class="search-content">
      <van-tabs @click="onClick">
        <van-tab title="综合" name="pop">
          <van-grid :border="false" :column-num="2">
            <van-grid-item
              v-for="(item, index, key) in itemheader"
              :key="key"
              @click="handleClick(item.tradeItemId)"
              class="search-list"
            >
              <van-image :src="item.img" class="Images" />
              <div class="textHide">{{ item.title }}</div>
              <div class="prive-footer">
                <div class="prive">&yen;{{ item.price }}</div>
                <div></div>
                <div></div>
                <div>{{ item.cfav }} <van-icon name="star-o" /></div>
              </div>
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab title="新品" name="new">
          <van-grid :border="false" :column-num="2">
            <van-grid-item
              v-for="(item, index, key) in itemsell"
              :key="key"
              @click="handleClick(item.tradeItemId)"
              class="search-list"
            >
              <van-image :src="item.img" class="Images" />
              <div>{{ item.title }}</div>
              <div class="prive-footer">
                <div class="prive">&yen;{{ item.price }}</div>
                <div></div>
                <div></div>
                <div>{{ item.cfav }} <van-icon name="star-o" /></div>
              </div>
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab title="销量" name="sell">
          <van-grid :border="false" :column-num="2">
            <van-grid-item
              v-for="(item, index, key) in itemsell"
              :key="key"
              @click="handleClick(item.tradeItemId)"
              class="search-list"
            >
              <van-image :src="item.img" class="Images" />
              <div>{{ item.title }}</div>
              <div class="prive-footer">
                <div class="prive">&yen;{{ item.price }}</div>
                <div></div>
                <div></div>
                <div>{{ item.cfav }} <van-icon name="star-o" /></div>
              </div>
            </van-grid-item>
          </van-grid>
        </van-tab>
      </van-tabs>

      <div>
        <!-- <div>{{ item.title }}</div> -->
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Toast } from "vant"
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      gjc: "",
      value: "",
      value1: 0,
      itemheader: {},
      itemsell: {},
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onClick (name, title) {
      let titleName = localStorage.getItem("gjc")
      Toast(title)
      this.$axios.get('/search/searchByKeyword?', {
        params: { q: titleName, sort: name }
      }).then((res) => {
        this.itemsell = res.result.wall.docs
      })
    },
    retreat () {
      this.$router.push("/home/ShopSearch")
    },
    handleClick (tradeItemId) {
      this.$router.push({
        name: "productdetails",
        params: { tradeItemId: tradeItemId },
      })
    },
    list (gjc) {
      localStorage.setItem("gjc", gjc)
      let pop = 'pop'
      // q=${gjc}&page&sort=pop&offset=30
      this.$axios.get('/search/searchByKeyword?', {
        params: { q: gjc }
      }).then((res) => {
        this.itemheader = res.result.wall.docs
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    let val = this.$route.params.val
    this.gjc = val
    this.list(this.gjc)
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded"
      location.reload()
    }
  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.search-header {
  display: flex;

  .header-icon {
    font-size: 0.6rem;
    margin-left: 5px;
    margin-top: 17px;
  }

  .header-Search {
    flex: 2;
    margin-right: 10px;
  }
}

.search-content {
  overflow-y: scroll;
  height: 100vh;
  padding-bottom: 100px;
  .search-list {
    border: 5px solid #efefef;
    // border-radius: 5px;
    .Images {
      border-radius: 8px;
      overflow: hidden;
      height: 246px;
    }
    .textHide {
      margin-top: 8px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .prive-footer {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 8px;
      width: 100%;

      .prive {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}
</style>
<style>
.van-tab--active {
  color: #ff0076;
  font-weight: 500;
}
.van-tabs__line {
  position: absolute;
  bottom: 15px;
  left: 0;
  z-index: 1;
  width: 40px;
  height: 3px;
  background-color: #fff;
  border-radius: 3px;
}
.van-grid-item__content--center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: inherit;
}
</style>